<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://172.19.66.58/arcgis_js_api/library/3.14/esri/themes/calcite/css/calcite.css">
    <link rel="stylesheet" href="http://172.19.66.58/arcgis_js_api/library/3.14/esri/css/esri.css" />
    <style>
        html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; }
        #map { height: 100%; padding: 0;}
        #HomeButton {
            position: absolute;
            top: 95px;
            right: 20px;
            z-index: 50;
        }
        #footer { height: 2em; text-align: center; font-size: 1.1em; padding: 0.5em; }
        .dj_ie .infowindow .window .top .right .user .content { position: relative; }
        .dj_ie .simpleInfoWindow .content {position: relative;}

    </style>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'custom',
                location: "custom"
            }],
            has : {
                "esri-featurelayer-webgl": 1
            }

        };
    </script>
    <script src="http://172.19.66.58/arcgis_js_api/library/3.14/init.js"></script>
    <script src="gistool.js"></script>
</head>
<body>
<div>
    <div id="HomeButton"></div>
    <button id="preview">前视图</button>
    <button id="nextview">后视图</button>
    <button id="move">平移</button>
    <button id="big">拉框放大</button>
    <button id="small">拉框缩小</button>
    <button id="measureLength">测长度</button>
    <button id="measureArea">测面积</button>
    <button id="changeImage">影像</button>
    <button id="changeVec">矢量</button>
</div>
<div id="map"  style="width: 100%;height: 100%;">
</div>
</body>
<script>
    var map;
    var basemaps;
    require([
        "esri/map",
        "custom/util",
        'esri/layers/WebTiledLayer',
        "esri/layers/FeatureLayer",
        "esri/dijit/editing/AttachmentEditor",
        "esri/dijit/PopupTemplate",
        "dojo/parser",
        "dojo/dom",
        "esri/InfoTemplate",
        "esri/dijit/Scalebar",
        "esri/toolbars/navigation",
        "esri/dijit/HomeButton",
        //"dijit/layout/BorderContainer",
        //"dijit/layout/ContentPane",
        "dojo/domReady!"
    ], function (Map,Util,WebTiledLayer,FeatureLayer,AttachmentEditor,
                 PopupTemplate, parser,dom,InfoTemplate,Scalebar,Navigation,HomeButton) {
           parser.parse();
        map = new Map("map", {
            center: [120.429,37.355],
            zoom: 12,
            maxZoom:17,//最大空间等级
            minZoom:9,//最小空间等级
            logo:false,
            sliderStyle: 'large',
            sliderLabels: ['省','市','区', '县','乡','村','街道'],
            showLabels: true
        });

        //loadBaseMap(map);
        loadBaseMapResource(function (arr) {
            basemaps = arr;
        });
        loadVecMap(map, basemaps);
        //比例尺
        var scalebar = new Scalebar({
            map: map,
            attachTo: "bottom-left",
            scalebarStyle:"ruler",
            scalebarUnit: "metric"
        });

        var lineLayer = new FeatureLayer("http://172.19.66.57:6080/arcgis/rest/services/TESTPAVEMENT/MapServer/0", {
            outFields: ["*"],
            mode: FeatureLayer.MODE_ONDEMAND
        });
        var pavementLayer = new FeatureLayer("http://172.19.66.57:6080/arcgis/rest/services/TESTPAVEMENT/MapServer/1", {
            outFields: ["*"],
            mode: FeatureLayer.MODE_ONDEMAND,
            infoTemplate: new InfoTemplate("${LXMC}-${LDXLH}-${UPORDOWN}")
        });
        map.addLayers([pavementLayer,lineLayer]);


        var navToolbar = new Navigation(map);
        //前视图
        dom.byId("preview").onclick = function () {
            navToolbar.zoomToPrevExtent();
        };
        //后视图
        dom.byId("nextview").onclick = function(){
            navToolbar.zoomToNextExtent();
        };
        //拉框放大
        dom.byId("big").onclick = function(){
            navToolbar.activate(Navigation.ZOOM_IN);
        };
        //拉框缩小
        dom.byId("small").onclick = function(){
            navToolbar.activate(Navigation.ZOOM_OUT);
        };
        //平移
        dom.byId("move").onclick = function(){
            navToolbar.activate(Navigation.PAN);
        };
        //测长度
        dom.byId("measureLength").onclick = function(){
            measureLine(map);
        };
        //测面积
        dom.byId("measureArea").onclick = function(){
            measureArea(map);
        };
        //加载影像图
        dom.byId("changeImage").onclick = function () {
            loadImgMap(map, basemaps);
        };
        //加载矢量图
        dom.byId("changeVec").onclick = function () {
            loadVecMap(map, basemaps);
        };
        var homebtn = new HomeButton({
            map:map,
        },"HomeButton");
        homebtn.startup();

    });
</script>

</html>
